<template>
  <div class="maincontainer">
    <div class="maintop flexrow">
		  	<div class="banner mainleft">
				<!-- <el-carousel class="roundbox" indicator-position="none"> -->
				<el-carousel class="roundbox" >
				    <el-carousel-item  v-for="item of bannerlist" :key="item.data_id">
				      	<img class="bannerimg" :src="item.pic" alt="">
				    </el-carousel-item>
				</el-carousel>			 
		  	</div>
			<div class="notebox mainright roundbox">
				<div class="notetit">
					<span>最新公告</span>
				</div>
				<div class="notelist">
				<ul >
					<li v-for="item of notelist" 
					:key="item.data_id"
					@click="opendetail(item.data_id)"
					>
						<span class="ellipsis">
							{{item.title}}
						</span>
					</li>
				</ul>
				</div>
			</div>

	</div>
	
	<div  class="mainbot flexrow">
	  		<div class="mainleft flexrow">
	  			<router-link to="/law" class="mainlink main1 flexrow roundbox">
	  				<img src="../../assets/images/main1.png" alt="">
	  				<div class="bg-serch"></div>
	  				<h1>查法规</h1>
	  			</router-link>
	  			<div class="mainlink main2 flexrow roundbox" :plain="true" @click="message">
	  				<img src="../../assets/images/main2.png" alt="">
	  				<div class="bg-money"></div>
	  				<h1>查发票</h1>
	  			</div>
	  			<router-link to="/demand" class="mainlink main3 flexrow roundbox">
	  				<img src="../../assets/images/main3.png" alt="">
	  				<div class="bg-top"></div>
	  				<h1>筹划需求</h1>
	  			</router-link>
	  			
	  		</div>
	  		<!-- <a class="mainright main4 roundbox" href="http://www.yejianping.cn/" target="_blank">
	  			<img :src="imgurl" alt="">
	  		</a> -->
	  		<!-- <div class="mainright main4 roundbox" @click="openweblink">
	  			<img :src="imgurl" alt="">
	  		</div> -->
	  		<div class="mainright main4 roundbox" @click="goweb">
	  			<img :src="imgurl" alt="">
	  		</div>
	  	</el-col>
	</div>
    <el-dialog   :visible.sync="note" class="notedia" center>
        <p slot="title" class="dialog-title notedetail">
         	{{title}}
        </p>
        <p class="notedetail subtitle">
        	发布时间：{{subtitle}}
        </p>
        <div v-html="content">
            {{content}}
        </div>
        <div @click='backhome' class="backbtn">返回列表</div>
    </el-dialog>
    <el-dialog   :visible.sync="link" class="notedia" center >
    	<p slot="title" class="dialog-title">
         	叶建平财税工作室
        </p>
        <div v-loading="loading">
        	<iframe src="http://www.yejianping.cn/" width="950px" height="600px" style="overflow: hidden; border:none;"
        	></iframe>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import {updateUserInfo} from "../../util/common";
  export default {
    name: 'HomeMain',
    data () {
      return {
        bannerlist:[],
        imgurl:'',
        notelist:[],
        note:false,
        link:false,
        title:'',
        subtitle:'',
        content:'',
        loading:true

      }
    },   
    computed: {
    	showbanner () {
    		return this.bannerlist.length
    	}
    },
    methods:{
    	getHomeInfo () {
    		var _this = this;
    		axios.all([
    			axios.get('/home/index'),
                axios.get('/announce/index')             
    		]).then(axios.spread(function(homeResp,annouResp) {
	    		let res1 = homeResp.data
	    		let res2 = annouResp.data
		        if (res1.status == 200 && res2.status == 200) {
		          _this.bannerlist = res1.msg['首页-幻灯片'].list
		          _this.imgurl = res1.msg['首页-右下角'].list[0].pic
		          _this.notelist = res2.msg.data.slice(0,9)
		        }
    		}))         
	    }, 	        	    
    	message() {
	        this.$message({
	          dangerouslyUseHTMLString: true,
	          message: '<p>亲，该功能正在努力开发中，敬请期待!</p>',
	          center:true,
	          offset:300,
	          duration:1000
	        })
      	},
      	opendetail(id){
      		this.note=true
      		axios.get('/announce/detail?id='+id)
              .then((res)=>{
					res = res.data
				     if (res.status==200) {
				     	console.log(res)
				        const data = res.msg
         					this.title= data.title
         					this.subtitle = data.create_at
         					this.content= data.content					        
					}
              }) 	      		
      	},
      	backhome(){
      		this.note=false
      	},
      	openweblink(){
      		this.link=true   		
			setTimeout(() => {
			    this.loading = false;
			}, 2000)
      	},
      	goweb(){
      		const shell = require('electron').shell
			shell.openExternal('http://www.yejianping.cn/')
      	}
    },
    mounted () {
      this.getHomeInfo()
      updateUserInfo();
    }
  }
</script>

<style scoped>
.maincontainer{
	position: relative;
}

  /*banner图片固定宽高比*/
   /*.banner{
  	width: 100%;
   	height: 0;
   	overflow: hidden;
   	padding-bottom: 66.7%;
   }
   .bannerimg{
   	width: 100%;
   }*/

   .maintop{
   	height: 312px;
   	margin-bottom: 10px;
   }
   .banner{
   	width: 718px;
   	height: 100%;
   }
   .bannerimg{
   	width: 100%;
   }
   .el-carousel{
	padding-bottom: 0;
   }
   .roundbox{
   	border-radius: 6px;
   }
   .notebox{
   	background: #fff;
   	padding:15px;
   	width: 246px;
   }
	.notetit{
		color:#2155E7;
		font-weight: 600;
		border-bottom:1px solid #E5E5E5;
		padding-bottom: 10px;
	}
	.notetit span{
		font-size: 17px;
		padding-bottom: 14px;
	    border-bottom:3px solid #2155E7;
	}
	.notelist ul{
		padding:0 0 0 15px !important;
	}
	.notelist li{
		color: #2155E7;
		margin-bottom: 6px;
		height: 20px;
		line-height: 20px;
		cursor: pointer;
	}
	.notelist li span{
		color: #666666;
		font-size: 14px;
		display: inline-block;
		width: 230px;
		height: 16px;
	}
.mainbot{
	height: 224px;
}
.mainleft{	
	width: 718px;
	margin-right: 10px;
}
.mainbot .mainleft{
	height: 100%; 
	justify-content: between;
} 
.mainlink{ 
	width: 233px;
	height: 222px;
	margin-right: 10px;
	text-align: center;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: relative;
}
.mainlink img{
	position: absolute;
	top:0;
	left:0;
	width: 233px;
	height: 222px;
	z-index: 10;
}
.mainleft>.mainlink:last-child{
	margin:0;
}
.mainlink h1{
	color: #fff;
	font-size: 30px;
	font-weight: 400;
	z-index: 99;
}
.mainlink>div{
	margin-right: 20px;
	z-index: 99;
}
.mainlink:hover img{
	opacity: 0.7
}
.mainbot .mainright{
	width: 277px;
	height: 222px;
}
.mainbot .mainright img{
	width: 100%;
	height: 222px;
}
/*.main1{
	background:url('../../assets/images/main1.png') no-repeat;
}*/
.bg-serch {
    width: 49px; height: 47px;
    background: url('../../assets/css_sprites.png') -79px -10px;
}
/*.main2{
	background:url('../../assets/images/main2.png') no-repeat;
}*/
.bg-money {
    width: 50px; height: 44px;
    background: url('../../assets/css_sprites.png') -10px -79px;
}
/*.main3{
	background:url('../../assets/images/main3.png') no-repeat;
}*/
.bg-top {
    width: 49px; height: 49px;
    background: url('../../assets/css_sprites.png') -10px -10px;
}
.notedetail{
	text-align: center;
}
.subtitle{
	padding-bottom: 10px;
	border-bottom:1px solid #ccc;
}
.backbtn{
	border:1px solid #808080;
	border-radius: 15px;
	float:right;
	padding:5px 8px;
	margin-bottom: 15px;
}
.main4,.backbtn{
	cursor:pointer;
}
</style>
